<template>
  <div class="userAdd">
    <Row class="row">
        <Col span="11">
            <Form :model="formItem" :label-width="100">
                <FormItem label="登录名">
                    <Input ref="loginName" v-model.trim="formItem.loginName"></Input>
                </FormItem>
                <FormItem label="登录密码">
                    <Input ref="password" type="password" v-model.trim="formItem.password"></Input>
                </FormItem>
                <FormItem label="用户名称">
                    <Input ref="userName" v-model.trim="formItem.userName"></Input>
                </FormItem>
                <FormItem label="用户类别">
                    <Select v-model="formItem.userType">
                        <Option v-for="item in formItem.userTypeList" :value="item.userType" :key="item.userType">{{ item.userType }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="手机号码">
                    <Input v-model.trim="formItem.mobile"></Input>
                </FormItem>
                <FormItem label="备注">
                    <Input v-model.trim="formItem.note" type="textarea"></Input>
                </FormItem>
                <FormItem label="USBKEY设置">
                    <Col span="15">
                        <Input v-model.trim="formItem.userKey" class="mishi"></Input>
                    </Col>
                    <Col span="8" offset="1">
                        <Button class="full-width" type="ghost">设置</Button>
                    </Col>
                </FormItem>
            </Form>
        </Col>
        <Col span="12">
            <Col span="3" offset="4" style="line-height:30px;">角色</col>
            <Col span="17">
                <Select ref="roles" v-model="model10" multiple style="width:100%">
                    <Option v-for="item in roles" :value="item.roleBh" :key="item.roleBh">{{ item.roleBh }}</Option>
                </Select>
            </col>
        </Col>
    </Row>
    <Row>
        <Col span="24">
            <Form :model="formItem" :label-width="100">
                <FormItem label="是否锁定">
                    <i-switch v-model="formItem.isLock" size="large">
                        <span slot="open">是</span>
                        <span slot="close">否</span>
                    </i-switch>
                    <Button class="save" type="ghost" @click="add">保存</Button>
                    <Button class="quxiao" @click="closeLayer" type="ghost">取消</Button>
                </FormItem>
            </Form>
        </Col>
    </Row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "userAdd",
  data() {
    return {
      formItem: {
        loginName: "",
        password: "",
        userName: "",
        userType: "",
        userKey: "",
        mobile: "",
        note: "",
        isLock: true,
        userTypeList: [],
      },
      roles: [],
      model10: []
    };
  },
  mounted: function() {
    this.$nextTick(() => {
      this.getRoles(); //获取全部角色
      this.getUsers(); //获取全部用户
    });
  },
  methods: {
    //关闭layer弹窗
    closeLayer() {
      layer.closeAll();
    },
    //获取用户列表
    getUsers() {
      axios
        .get(URL + "/api/userservice/v1/users", {
          headers: {'Authorization': appDB.get("userInfo").token},
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.formItem.userTypeList = d.record.rows;
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //获取角色列表
    getRoles() {
      axios
        .get(URL + "/api/userservice/v1/roles/all", {
          headers: {'Authorization': appDB.get("userInfo").token},
        })
        .then(response => {
          let d = response.data;
          if (d.resultCode == 0) {
            this.roles = d.record.rows;
            console.info(this.roles)
          } else {
            layer.msg(d.msg);
          }
        })
        .catch(error => {
          layer.msg("网络错误");
        });
    },
    //新增
    add() {
      if (this.$refs.loginName.value == "") {
        layer.msg("请填写登录名");
        this.$refs.loginName.focus();
      } else if (this.$refs.password.value == "") {
        layer.msg("请填写登录密码");
        this.$refs.password.focus();
      } else if (this.$refs.userName.value == "") {
        layer.msg("请填写用户名");
        this.$refs.userName.focus();
      } else if (this.$refs.roles.value == "") {
        layer.msg("请选择角色");
      } else {
        axios
          .post(URL + "/api/userservice/v1/users", {
            loginName: this.formItem.loginName,
            password: this.formItem.password,
            userName: this.formItem.userName,
            userType: this.formItem.userType,
            mobile: this.formItem.mobile,
            note: this.formItem.note,
            isLock: this.formItem.isLock,
            userKey: this.formItem.userKey,
            roles: this.model10,
          },
          {
            headers: {'Authorization': appDB.get("userInfo").token},
          })
          .then(response => {
            let d = response.data;
            if (d.resultCode == 0) {
              this.closeLayer();//关闭弹窗
              this.$parent.getUsers();//添加成功以后重新渲染列表获得最新数据
            } else {
              layer.msg(d.msg);
            }
          })
          .catch(error => {
            layer.msg("网络错误");
          });
      } //else
    }
  }
};
</script>

<style scoped>
@import "../assets/css/elementUI.css";
.userAdd {
  width: 100%;
  float: left;
}
.ivu-input {
  padding: 0 7px !important;
}
.row {
  margin: 30px 0 0 0;
  padding: 0 30px;
}
.ivu-switch-checked {
  border-color: #38b824;
  background-color: #38b824;
}
.quxiao {
  background: #cecece;
  float: right;
  padding: 4px 40px;
  margin-right: 30px;
  border-radius: 30px;
}
.save {
  float: right;
  margin-right: 8%;
  border-radius: 30px;
  padding: 4px 40px;
  background: #39b423;
  border: 1px solid #39b423;
  color: #fff;
}
</style>


